<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>BEM</h1>
    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="http://getbem.com/">BEM</a></li>
        <li><a target="_blank" href="https://juejin.im/post/5b925e616fb9a05cdd2ce70d">CSS — BEM 命名规范</a></li>
        <li><a target="_blank" href="https://github.com/Tencent/tmt-workflow/wiki/%E2%92%9B-%5B%E8%A7%84%E8%8C%83%5D--CSS-BEM-%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83">⒛ [规范] CSS BEM 书写规范</a></li>
    </ul>

    <h2>摘抄</h2>

    <p>使用 BEM 命名规范，理论上讲，每行 css 代码都只有一个选择器。</p>
    
    <p>BEM代表 “块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。</p>
    
    <p>在选择器中，由以下三种符号来表示扩展的关系：</p>
    
    <ul>
        <li><strong>-</strong>   中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。</li>
        <li><strong>__</strong>   双下划线：双下划线用来连接块和块的子元素。</li>
        <li><strong>_</strong>   单下划线：单下划线用来描述一个块或者块的子元素的一种状态。</li>
    </ul>

    <h2>示例</h2>
    <pre>
.ry{}
.ry__item{}
.ry__item_hightlight{}
.ry__product-name{}
.ry__link{}
.ry__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.ry__item_current{
    .ry__link{}
}
    </pre>


</body>

</html>